<template>
  <div class="page-container">
    <!-- 顶部筛选栏 -->
    <div class="filter-bar">
      <el-card class="filter-card">
        <div class="filter-content">
          <!-- 第一行筛选项 -->
          <div class="filter-row">
            <el-select v-model="Prefecture" placeholder="选择地市" class="filter-item" >
              <el-option
                v-for="item in Prefectures"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            <el-select v-model="city" placeholder="选择区县" class="filter-item" >
              <el-option
                v-for="item in citys"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="task" placeholder="缺陷类型" class="filter-item" >
              <el-option
                v-for="item in tasks"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="type" placeholder="通信塔类型" class="filter-item" >
              <el-option
                v-for="item in towerTypeList"
                :key="item.towerType.id"
                :label="item.towerType.typeName"
                :value="item.towerType.id"
              />
            </el-select>
            <el-select v-model="Audit" placeholder="缺陷状态" class="filter-item" >
              <el-option
                v-for="item in Audits"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <!-- 第二行筛选项 -->
          <div class="filter-row">
            <el-input v-model="input" placeholder="巡视任务名称" class="filter-item wide-input">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              class="filter-item date-picker"
            />
            <el-button  style="background-color: rgba(110, 78, 208, 0.1); border-color: #6f42c1; color: rgb(110, 78, 208);" type="primary" @click="filterUser" class="filter-btn">查询</el-button>
            <el-button @click="resetFilters" class="filter-btn reset-btn">重置</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 主体区域 -->
    <div class="main-section">
      <!-- 左侧表格 -->
      <div class="table-section">
        <el-card class="table-card">
          <div class="table-header">
            <h3 class="table-title">缺陷列表</h3>
            <span class="table-total">共 {{ total }} 条记录</span>
          </div>
          <el-table ref="tableRef" :data="displayedData" :row-style="{height: '60px'}" @row-click="handleRowClick" :row-class-name="tableRowClassName" highlight-current-row size="small" class="auto-width-table">
            <el-table-column label="序号"  textAlign="center">
              <template #default="{ row, $index }">
                <span v-if="row.inspectionTask" class="index-number">{{ (currentPage - 1) * pageSize + $index + 1 }}</span>
                <span v-else style="opacity: 0;">0</span>
              </template>
            </el-table-column>
            <el-table-column label="缺陷内容"  textAlign="center">
              <template #default="{ row }">
                <span v-if="row.inspectionTask" style="color: orangered;" size="small"  class="table-text">{{ row.manualReview?.defectContent }}</span>
              </template>
            </el-table-column>
            <el-table-column label="巡视任务"  >
              <template #default="{ row }">
                <span class="table-text">{{ row.inspectionTask?.taskName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="地市"  textAlign="center">
              <template #default="{ row }">
                <span>{{ row.tower?.city }}</span>
              </template>
            </el-table-column>
            <el-table-column label="区县"  textAlign="center">
              <template #default="{ row }">
                <span>{{ row.tower?.county }}</span>
              </template>
            </el-table-column>
            <el-table-column label="上报时间"  textAlign="center">
              <template #default="{ row }">
                <span class="table-text">{{ row.manualReview?.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="缺陷状态" textAlign="center">
              <template #default="{ row }">
                <el-tag v-if="row.inspectionTask" :type="getStatusTagType(row.manualReview?.defectStatus)" size="small" effect="light">
                  {{ row.manualReview?.defectStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" textAlign="center">
              <template #default="{ row }">
                <el-button v-if="row.inspectionTask" size="small" type="primary" link @click.stop="handleRowClick(row)"  style="color: rgb(110, 78, 208);">查看</el-button>
                
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              layout="total, prev, pager, next, jumper"
              :background="true"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!-- 右侧详情 -->
      <div class="detail-section">
        <el-card class="detail-card">
          <div class="detail-header" v-if="selectedRow">
            <h3 class="detail-title">{{ selectedRow.inspectionTask?.taskName }} — {{selectedRow.manualReview?.defectContent}}</h3>
            <el-tag :type="getStatusTagType(selectedRow.manualReview?.defectStatus)" size="medium">
              {{ selectedRow.manualReview?.defectStatus }}
            </el-tag>
          </div>
          <div class="empty-state" v-else>
            <el-empty description="请从左侧选择一条缺陷记录查看详情" />
          </div>
          <!-- ✅ 重构后的滚动区域 -->
          <div class="detail-scroll-container" v-if="selectedRow">
            <div class="detail-image-container">
              <div class="image-wrapper">
                <el-image 
                  style="width: 100%;"
                  :src="selectedRow?.inspectionTaskResultDetail?.primaryImageUrl" 
                  fit="contain" 
                  class="defect-image"
                  @load="drawBoxes"
                  :preview-src-list="[selectedRow?.inspectionTaskResultDetail?.primaryImageUrl]"
                >
                  <template #error>
                    <div class="image-error">
                      <el-icon><picture /></el-icon>
                      <span>图片加载失败</span>
                    </div>
                  </template>
                </el-image>
                <canvas ref="canvasRef" class="bounding-box-canvas"></canvas>
              </div>
            </div>
            
            <div class="detail-content-container">
  <div class="process-form-wrapper">
    <el-form label-width="100px" size="medium" class="process-form">
      <template v-if="submitBtnFlag">
        <!-- 状态选择区域 -->
        <div class="form-section">
          <el-form-item label="处理状态：" class="status-item">
            <el-radio-group v-model="formStatus">
              <el-radio-button label="消缺" class="status-radio" />
              <el-radio-button label="无需处理" class="status-radio" />
            </el-radio-group>
          </el-form-item>
        </div>
        
        <!-- 备注区域 -->
        <div class="form-section">
          <el-form-item label="处理备注：" class="remark-item">
            <el-input 
              type="textarea" 
              v-model="formRemark" 
              :rows="4" 
              maxlength="200" 
              show-word-limit
              resize="none"
              class="remark-textarea"
            />
          </el-form-item>
        </div>
        
        <!-- 提交按钮 -->
        <div class="form-action">
          <el-button 
          v-if="hasPermission(authStore.permissions,3)"
            type="primary" 
            @click="handleSubmit" 
            class="submit-btn"
            :disabled="!formStatus"
          >
            <el-icon><check /></el-icon>
            <span>提交处理结果</span>
          </el-button>
        </div>
      </template>
      
      <template v-else>
        <!-- 查看模式 -->
        <div class="form-section">
          <el-form-item label="处理状态：" >
            <div class="remark-display">
              <el-tag :type="formStatus === '消缺' ? 'success' : 'info'" size="large">
                {{ formStatus }}
              </el-tag>
            </div>
          </el-form-item>
        </div>
        
        <div class="form-section">
          <el-form-item label="处理时间：" >
            <div class="remark-display">
              <el-icon><clock /></el-icon>
              <span>{{ processTime }}</span>
            </div>
          </el-form-item>
        </div>
        
        <div class="form-section">
          <el-form-item label="处理备注：" >
            <div class="remark-display" :class="{ 'empty-remark': !formRemark }">
              {{ formRemark || '无备注信息' }}
            </div>
          </el-form-item>
        </div>
      </template>
    </el-form>
  </div>
</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref ,onMounted,nextTick} from 'vue';
import request from '@/utils/request';
import { Search, Picture } from '@element-plus/icons-vue';
import { hasPermission } from '@/utils/permissionUtils';
import { useAuthStore } from '@/stores/user';
const authStore = useAuthStore();//使用store仓库进行数据管理


const tableData = ref([])
const displayedData = ref([]);
const currentPage = ref(1);
const pageSize = ref(7);
const total = ref(0);
const formStatus = ref();
const formRemark = ref()
const input = ref()
const value2 = ref()
const tableRef = ref();
   
const Prefecture = ref('阜阳市')
const Prefectures = [
  { value: '阜阳市', label: '阜阳市' },
]

const city = ref()
const citys = [
  { value: '颍州区', label: '颍州区' },
  { value: '颍东区', label: '颍东区' },
  { value: '颍泉区', label: '颍泉区' },
  { value: '临泉区', label: '临泉区' },
  { value: '太和县', label: '太和县' },
  { value: '阜南县', label: '阜南县' },
  { value: '颍上县', label: '颍上县' },
  { value: '界首市', label: '界首市' },
]

const task = ref()
const tasks = [
  { value: '例行巡检', label: '例行巡检' },
  { value: '自定义巡检', label: '自定义巡检' },
]

const Audit = ref()
const Audits = [
  { value: '未处理', label: '未处理' },
  { value: '已消缺', label: '已消缺' },
  { value: '无需处理', label: '无需处理' },
]

const type = ref<any>()
const towerTypeList = ref()
const getAllTowerType = () => {
  request.get('/resource/getAllTowerType').then((res)=> {
    towerTypeList.value = res.data
  })
}

const processTime = ref('');

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  updateDisplayedData();
};

const updateDisplayedData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  const currentData = tableData.value.slice(start, end);
  displayedData.value = Array.from({ length: pageSize.value }, (_, index) => currentData[index] || {});
};

const getAllReviewedManualView = () => {
  request.get('/manager/getAllReviewedManualView').then((res)=> {
    total.value = res.data.length
    tableData.value = res.data
    updateDisplayedData()

    if (tableData.value.length > 0) {
      nextTick(() => {
        tableRef.value?.setCurrentRow(tableData.value[0]);
        handleRowClick(tableData.value[0]);
      });
    }
  })
}

const filterUser = () => {
  request.post("/manager/getAllReviewedManualViewByCondition" ,{
    city: Prefecture.value || '',
    county: city.value || '',
    defectContent: task.value || '',
    towerTypeID: type.value || '',
    taskName: input.value || '',
    defectStatus: Audit.value || '',
    startTime: (value2.value?.[0]) ? formatDateOne(value2.value[0]) : '',
    endTime: (value2.value?.[1]) ? formatDateOne(value2.value[1]) : '',
  }).then(
    (res:any)=>{
      if(res.status == 200){       
        total.value = res.data.length
        tableData.value = res.data
        updateDisplayedData()

        if (tableData.value.length > 0) {
          nextTick(() => {
            tableRef.value?.setCurrentRow(tableData.value[0]);
            handleRowClick(tableData.value[0]);
          });
        }
      }
    }
  )
}

const resetFilters = () => {
  Prefecture.value = '阜阳市';
  city.value = '';
  task.value = '';
  type.value = '';
  Audit.value = '';
  input.value = '';
  value2.value = [];
  filterUser();
};

const formatDateOne = (date:any) => {
  let d = new Date(date);
  let year = d.getFullYear();
  let month = String(d.getMonth() + 1).padStart(2, '0');
  let day = String(d.getDate()).padStart(2, '0');
  let hours = String(d.getHours()).padStart(2, '0');
  let minutes = String(d.getMinutes()).padStart(2, '0');
  let seconds = String(d.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const selectedRow = ref();
const canvasMessageList = ref<any>([]);
const canvasScale = ref()
const submitBtnFlag = ref()
const handleRowClick = (row: any) => {
  selectedRow.value = row;  
  if (row.manualReview?.defectStatus === '待处理') {    
    submitBtnFlag.value = true;
    formStatus.value = '';
    formRemark.value = '';
  } else {
    submitBtnFlag.value = false;
    processTime.value = row.manualReview?.processingTime || '';
    formStatus.value = row.manualReview?.defectStatus || '';
    formRemark.value = row.manualReview?.processingDescription || '';
  }
  
  canvasMessageList.value = row.manualReview?.defectInformation || '[]';
  canvasScale.value = row.manualReview?.canvasScale || '1'  
  nextTick(() => {
    drawBoxes();
  });
}

const tableRowClassName = ({ row }: { row: any }) => {
  return row === selectedRow.value ? 'selected-row' : '';
}

const getStatusTagType = (status:any) => {
  switch (status) {
    case '未处理': return 'warning';
    case '已消缺': return 'success';
    case '无需处理': return 'info';
    default: return '';
  }
}

const handleSubmit = () => {
  request.post('/manager/defectEliminationProcessing',{
    id:selectedRow.value.manualReview.id,
    defectStatus:formStatus.value,
    processingDescription:formRemark.value,
  }).then((res:any)=>{
    if(res.data.status == 'success'){
      getAllReviewedManualView()
    }
  })
}

const canvasRef = ref<HTMLCanvasElement | null>(null);
  const drawBoxes = async () => {
  await nextTick();

  const canvas = canvasRef.value;
  if (!canvas) return;

  const imgElement = canvas.closest(".image-wrapper")?.querySelector("img") as HTMLImageElement;
  if (!imgElement || !imgElement.complete) return;

  const { naturalWidth, naturalHeight } = imgElement;
  const { width, height } = imgElement.getBoundingClientRect();
  // 按比例设置 canvas 尺寸和定位
  let scale;
  if (width / naturalWidth > height / naturalHeight) {
    scale = height / naturalHeight;
    canvas.width = naturalWidth * scale;
    canvas.height = height;
    canvas.style.left = (width - canvas.width) / 2 + 'px';
    canvas.style.top = '0px';
  } else {
    scale = width / naturalWidth;
    canvas.width = width;
    canvas.height = naturalHeight * scale;
    canvas.style.left = '0px';
    canvas.style.top = (height - canvas.height) / 2 + 'px';
  }
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  try {
    const parsed: any[] = JSON.parse(canvasMessageList.value || '[]');
    parsed.forEach(item => {
      const messages = item?.result?.message || [];
      messages.forEach((msg: any) => {
        const { x1, y1, x2, y2 } = msg.coordinate;
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
        ctx.strokeRect(
          x1 * scale * (1/ canvasScale.value),
          y1 * scale * (1/ canvasScale.value),
          (x2 - x1) * scale * (1/ canvasScale.value),
          (y2 - y1) * scale * (1/ canvasScale.value)
        );

        // 可选：画标签文字
        ctx.font = "14px sans-serif";
        ctx.fillStyle = "red";
        ctx.fillText(msg.description || '', x1 * scale * (1/ canvasScale.value)  + 4, y1 * scale * (1/ canvasScale.value) - 6);
      });
    });
  } catch (err) {
    console.warn("绘制出错，JSON 解析失败", err);
  }
};


onMounted(()=> {
  getAllReviewedManualView()
  getAllTowerType()
})
</script>

<style scoped>
.page-container {
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding: 16px;
  box-sizing: border-box;
}

.filter-bar {
  margin-bottom: 16px;
}

.filter-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 16px;
}

.filter-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.filter-item {
  min-width: 160px;
  flex: 1;
}

.filter-item.wide-input {
  min-width: 240px;
}

.filter-item.date-picker {
  min-width: 320px;
  flex: 2;
}

.filter-btn {
  min-width: 100px;
  height: 36px;
}

.reset-btn {
  background-color: #fff;
  color: #606266;
  border-color: #dcdfe6;
}

.main-section {
  flex: 1;
  display: flex;
  gap: 16px;
  overflow: hidden;
  min-height: calc(100vh - 300px);
}

.table-section, .detail-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}


.detail-section{
  flex: 0 0 40%;
  max-width: 40%;
  height: calc(100vh - 250px); /* 固定高度 */
  display: flex;
  flex-direction: column;
}

.table-section {
  flex: 0 0 60%;
  max-width: 60%;
}

.table-card {
  width: 100%;
  height: calc(100vh - 250px);
  border-radius: 8px;
  border: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.table-total {
  font-size: 14px;
  color: #909399;
}

.defect-table {
  flex: 1;
  border-radius: 6px;
}

.defect-table :deep(.selected-row) {
  background-color: #f0f7ff;
}

.index-number {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  color: #606266;
}

.task-name {
  font-weight: 500;
  color: #303133;
}

.time-cell {
  font-size: 13px;
  color: #606266;
}

.table-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* 右侧详情卡片 */
.detail-card {
  width: 95%;
  height: calc(100vh - 300px);
  display: flex;
  flex-direction:column;
  border-radius: 8px;
  overflow-y: scroll;
}

/* 滚动容器 */
.detail-scroll-container {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction:column;
  min-height: 0;
  overflow-y: auto;
}

/* 图片容器 */
.detail-image-container {
  width: 100%;
  background: #164d85;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  border-radius: 4px;
  overflow: hidden;
}

.defect-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block; /* 防止图片下方有间隙 */
}

.bounding-box-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 内容容器 */
.detail-content-container {
  flex: 1;
  padding: 0 16px 16px;
  overflow-y: auto;
}

.detail-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
}

.meta-label {
  color: #909399;
  min-width: 70px;
}

.meta-value {
  color: #303133;
  font-weight: 500;
}

/* 表单容器 */
.process-form-wrapper {
  margin-top: 25px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 表单部分分隔 */
.form-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ebeef5;
}

/* 状态选择区域 */
.status-item {
  margin-bottom: 0;
}

.status-radio {
  margin-right: 10px;
}

.status-radio:last-child {
  margin-right: 0;
}

/* 备注区域 */

.remark-textarea {
  width: 100%;
}

.remark-textarea :deep(.el-textarea__inner) {
  border-radius: 6px;
  padding: 12px;
  box-shadow: none;
  transition: all 0.3s;
}

.remark-textarea :deep(.el-textarea__inner):focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 提交按钮 */
.form-action {
  text-align: right;
  margin-top: 24px;
}

.submit-btn {
  width: 180px;
  height: 40px;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.3s;
}

.submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.submit-btn:active {
  transform: translateY(0);
}

.status-display {
  display: flex;
  align-items: center;
}

.time-display {
  display: flex;
  align-items: center;
  color: #606266;
}

.time-display .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.remark-display {
  line-height: 1.6;
  white-space: pre-wrap;
}

.empty-remark {
  font-style: italic;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .process-form-wrapper {
    padding: 12px;
  }
  
  .form-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
  }
  
  .submit-btn {
    width: 100%;
  }
}

.process-form {
  padding: 10px 8px;
}

.form-value {
  color: #303133;
  font-weight: 500;
}

.remark-content {
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  white-space: pre-wrap;
  min-height: 60px;
}

.submit-btn {
  width: 100%;
  height: 40px;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #c0c4cc;
}

@media (max-width: 1600px) {
  .table-section {
    flex: 0 0 55%;
    max-width: 55%;
  }
  
  .detail-section {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

@media (max-width: 1400px) {
  .main-section {
    flex-direction: column;
  }
  
  .table-section, .detail-section {
    flex: 1;
    max-width: 100%;
  }
}


/* 表格自动宽度样式 */
.auto-width-table {
  table-layout: fixed; /* 关键属性 */
}

/* 定义各列宽度比例 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(1)) { width: 5%; }  /* 序号 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(2)) { width: 12%; } /* 任务名称 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(3)) { width: 12%; } /* 任务类型 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(4)) { width: 12%; } /* 通信塔类型 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(5)) { width: 8%; }  /* 地市 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(6)) { width: 8%; }  /* 区县 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(7)) { width: 8%; }  /* 巡视人员 */
.auto-width-table :deep(.el-table__header-wrapper th:nth-child(8)) { width: 12%; } /* 任务状态 */


/* 确保内容不溢出 */
.auto-width-table :deep(.cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .auto-width-table {
    min-width: 1000px; /* 在小屏幕上保持水平滚动 */
  }
}

.table-text {
  color: #606266;
  word-break: break-word;   /* 避免长英文单词或URL撑破容器 */
  white-space: normal;      /* 正常换行 */
  line-height: 22px;
}

</style>